<template>
    <div class="heading" :style="{ backgroundImage: `url('${backgroundimage}')` }">
        <div class="title">
            <h1>景区介绍</h1>
        </div>
    </div>
    <section class="container" id="posts">
        <div class="post-container">
            <spotdetail :spotContent="spotContent" :spotName="spotName" :viewCount="viewCount"></spotdetail>
        </div>
        <div class="sidebar">
            <recommendspot :recommendValue="recommendValue"></recommendspot>
        </div>
    </section>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getSpotDetailAPI, homeHotSoptsAPI } from '@/api'
import spotdetail from '@/components/Spot/spotdetail.vue';
import recommendspot from '@/components/Spot/recommendspot.vue';

const route = useRoute()
const viewCount = ref()
const spotName = ref()
const spotContent = ref();
const spotId = ref()
const backgroundimage = ref();
const recommendValue = ref()
const initspotdetail = async () => {
    const res = await getSpotDetailAPI(spotId.value)
    spotContent.value = res.content
    spotName.value = res.spotName
    backgroundimage.value = res.thumbnail
    viewCount.value = res.viewCount
}
const initrecommendspot = async () => {
    const res = await homeHotSoptsAPI()
    recommendValue.value = res
}

initrecommendspot()

watch(
    () => route.query.spotId,
    () => {
        spotId.value = route.query.spotId
        initspotdetail()
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.heading {
    min-height: 50vh;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
}

.heading .title {
    text-align: center;
    align-items: center;
    color: #00ff66;
    font-size: 2rem;
    word-break: break-all;
}

section {
    padding: 2rem 9%;
}

.container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 2.5rem;
    background-color: #fff;
}

@media (max-width:1200px) {
    section {
        padding: 2rem;
    }
}

@media (max-width:991px) {
    .container {
        grid-template-columns: 2fr 1fr;
    }
}

@media (max-width:768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
</style>